<template lang="">
  <div>
    <div>
      <span style="color: #66A4D7;">竞价大厅</span>
      <span style="margin-left: 10px;margin-right:10px;">>></span>
      <span style="color: #66A4D7;">竞价列表</span>
      <span style="margin-left: 10px;margin-right:10px;">>></span>
      <span>标的物名称限制</span>
    </div>
    <div class="bidding_details">
      <div class="bidding_details_one">
        <div style="height: 300px;">
          <div style="width: 597.25px;height: 300px;float: left;">
            <el-image style="height: 260px;width: 517.25px;margin-top: 20px;margin-left: 40px;" :src="src"></el-image>
          </div>
          <div style="width: 800px;height: 300px;float: left;">
            <div style="height: 150px;width: 800px;">
              <div style="height: 150px;width: 550px;float: left;">
                <p style="font-size: 20px;">标的名称显示</p>
                <p>
                  <span style="margin-right: 10px;">成交价</span>
                  <span style="color: red;font-size: 18px;">￥27,890</span>
                  <span style="color: #FF6633;font-size: 14px;margin-left: 50px;position: relative; top: -2px;">竞买人：某某某</span>
                </p>
                <p>
                  <span style="margin-right: 10px;">结束时间</span>
                  <span>2019/04/07 16:35:42</span>
                </p>
              </div>
              <div style="height: 150px;width: 250px;float: left;">
                <div style="margin-top: 20px;margin-bottom: 10px;margin-left: 70px;">本次服务顾问</div>
                <img style="width: 100px;height: 100px;margin-left: 70px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u561.svg">
              </div>
            </div>
            <div style="height: 150px;width: 800px;">
              <div style="width: 70px;background-color: #CCCCCC;height:70px;float: left;margin-top: 40px;line-height: 70px;text-align: center;color: #fff;">
                <!-- <div style="position: relative;top: 14px;left:20px;color: #fff;">竞买中</div> -->
                <!-- <div style="position: relative;top: 14px;left:20px;color: #fff;"></div> -->
                已结束
              </div>
              <div style="width: 730px;height: 70px;background-color: #F2F2F2;float: left;line-height: 70px;font-size: 18px;margin-top: 40px;">
                <span style="margin-left: 10px;">本次竞买已结束，期待您的下次参与!</span>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 300px;">
          <div style="width: 597.25px; height: 300px;float: left;">
            <div style="width: 517.25px;height:130px;margin-left: 40px;">
              <div style="width: 517.25px;height: 90px;">
                <img style="width: 20px;height: 25px;float: left;margin-top: 20px;transform: rotate(180deg);margin-left:10px;margin-right:10px;"
                src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1620.png">
                <div style="width: 90px;height:65px;background-color: #fff;border: 1px solid black;float: left;margin-right: 23px;">
                  <img style="width:90px;height: 65px;" src="https://img0.baidu.com/it/u=4160963516,2855623986&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499">
                </div>
                <div style="width: 90px;height:65px;background-color: #fff;border: 1px solid black;float: left;margin-right: 23px;">
                  <img style="width:90px;height: 65px;" src="https://img0.baidu.com/it/u=4160963516,2855623986&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499">
                </div>
                <div style="width: 90px;height:65px;background-color: #fff;border: 1px solid black;float: left;margin-right: 23px;">
                  <img style="width:90px;height: 65px;" src="https://img0.baidu.com/it/u=4160963516,2855623986&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499">
                </div>
                <div style="width: 90px;height:65px;background-color: #fff;border: 1px solid black;float: left;">
                  <img style="width:90px;height: 65px;" src="https://img0.baidu.com/it/u=4160963516,2855623986&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499">
                </div>
                <img style="width: 20px;height: 25px;float: left;margin-top: 20px;margin-left:10px;margin-right:10px;"
                src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1620.png">
              </div>
              <div>
                <img style="width: 20px;height: 20px;float: left;margin-right: 10px;margin-left: 10px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1633.png">
                <div style="color: #FF9933;position: relative;top: -3px;">由富宝资产交易整理标的政要提示:</div>
              </div>
            </div>
            <div style="width: 517.25px;height:50px;">
              <div style="width:80px;height:30px;float: left;">
                <img style="width: 20px;margin-left: 51px;"
                src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1634.png">
              </div>
              <div style="width:437.25px;float: left;">
                <span>A.标在无锡,受损组件,234片,型号:325W,玻璃屏破碎,已全部报废,组件边框可回收处理、受损组件支架为废钢材质,约9.58吨;</span>
              </div>
            </div>
            <div style="width: 517.25px;height:50px;">
              <div style="width:80px;height:30px;float: left;">
                <img style="width: 20px;margin-left: 51px;"
                src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1634.png">
              </div>
              <div style="width:437.25px;float: left;">
                <span>B.竞价按统货(组件边框和组件支架)每吨单价计,重量以实际提货重量为准;</span>
              </div>
            </div>
            <div style="width: 517.25px;height:30px;">
              <div style="width:80px;height:20px;float: left;">
                <img style="width: 20px;margin-left: 51px;"
                src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1634.png">
              </div>
              <div style="width:437.25px;float: left;">
                <span>C.竞价成交前,买受人不承担任何费用;</span>
              </div>
            </div>
            <div style="width: 517.25px;height:20px;">
              <div style="width:80px;height:20px;float: left;">
                <img style="width: 20px;margin-left: 51px;"
                src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1634.png">
              </div>
              <div style="width:437.25px;float: left;">
                <span>D.竞价成交后,买受人自行承担相应的装车和运货费用;</span>
              </div>
            </div>
          </div>
          <div style="width: 800px; height: 300px;float: left;">
            <div style="width: 800px;height: 50px;border-bottom: 1px solid grey;">
              <img style="width: 30px;height:30px;margin-top: 10px;float: left;"
              src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/1_0%E7%AB%9E%E4%B9%B0%E8%AF%A6%E6%83%85%EF%BC%88%E6%9C%AA%E7%99%BB%E9%99%86%EF%BC%89/u1622.png">
              <div style="float: left;font-size: 18px;margin-left: 15px;margin-top: 13px;">竞拍规则</div>
              <div style="float: right;margin-top: 26px;margin-left: 20px;">
                <span style="margin-right: 10px;">14</span>次围观
              </div>
              <div style="float: right;margin-top: 26px;margin-left: 20px;">
                <span style="margin-right: 10px;">5</span>人设置提醒
              </div>
              <div style="float: right;margin-top: 26px;margin-left: 20px;">
                <span style="margin-right: 10px;">0</span>人报名
              </div>
            </div>
            <div style="width: 800px;height: 125px;border-bottom: 1px solid grey;">
              <div style="width: 399px;height: 125px;float: left;">
                <div style="width: 399px;height:41px;">
                  <div style="width: 199px;float: left;">起拍价：20000元</div>
                  <div style="width: 200px;float: left;">保证金：1000元</div>
                </div>
                <div style="width: 399px;height:41px;">
                  <div style="width: 199px;float: left;">重量：9.58吨</div>
                  <div style="width: 200px;float: left;">数量：27</div>
                </div>
                <div style="width: 399px;height:42px;">
                  <div style="width: 199px;float: left;">交货方式：自提</div>
                  <div style="width: 200px;float: left;">交货地点：北京昌平</div>
                </div>
              </div>
              <div style="border:1px solid;float:left;height:95px;margin-top: 15px;color: grey;"></div>
              <div style="width: 399px;height: 125px;float: left;">
                <div style="width: 399px;height: 125px;float: left;">
                  <div style="width: 399px;height:41px;margin-left: 40px;">
                    <div style="width: 199px;float: left;">加价幅度：1000元</div>
                    <div style="width: 200px;float: left;">保留价：有</div>
                  </div>
                  <div style="width: 399px;height:41px;margin-left: 40px;">
                    <div style="width: 199px;float: left;">竞买时长：45分钟</div>
                    <div style="width: 200px;float: left;">延时：5分钟</div>
                  </div>
                  <div style="width: 399px;height:42px;margin-left: 40px;">
                    <div style="width: 199px;float: left;">佣金比例：0.5%</div>
                    <div style="width: 200px;float: left;">会员免佣金</div>
                  </div>
                </div>
              </div>
            </div><div style="width: 800px;height: 125px;">
              <p>竞价规则：竞买结束时，出价较高者即竞买成功</p>
              <p>交易提示：保证金不计入货款，交易完成后将在1-3个工作如原路退还</p>
              <p>卖<span style="margin-left: 31px;">家：爱***公司</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="bidding_details_two">
        <p style="text-align: center;">出价记录(34)</p>
        <div >
          <p style="text-align: center;">
            <span style="float: left;width: 33%;">状态</span>
            <span style="width: 33%;">竞买人</span>
            <span style="float: right;width: 34%;">价格</span>
          </p>
          <div style="width: 100%;height: 410px;">
            <p style="text-align: center;">
              <span style="float: left;width: 33%;color: red;">领先</span>
              <span style="width: 33%;color: red;">某某某</span>
              <span style="float: right;width: 34%;color: red;">27,890</span>
            </p>
            <p style="text-align: center;">
              <span style="float: left;width: 33%;">出局</span>
              <span style="width: 33%;">熊大</span>
              <span style="float: right;width: 34%;">26,890</span>
            </p>
            <p style="text-align: center;">
              <span style="float: left;width: 33%;">出局</span>
              <span style="width: 33%;">熊二</span>
              <span style="float: right;width: 34%;">25,890</span>
            </p>
            <p style="text-align: center;">
              <span style="float: left;width: 33%;">出局</span>
              <span style="width: 33%;">光头强</span>
              <span style="float: right;width: 34%;">24,890</span>
            </p>
            <p style="text-align: center;margin-top: 50px;">>>出价记录</p>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 70px;float: left;border: 1px solid black;background-color: #fff;">
      <div style="width: 10%;height: 70px;line-height: 70px;text-align: center;font-size: 20px;float: left;font-weight: bold;">
        竞拍流程：
      </div>
      <div style="border-right:1px solid;float:left;height:50px;float: left;margin-top: 10px;"></div>
      <div style="width: 89.9%;height: 70px;float: left;line-height: 70px;">
        <span style="margin-left: 60px;font-size: 20px;">01<span style="margin-left: 10px;">现场看货</span></span>
        <span style="margin-left: 60px;">></span>
        <span style="margin-left: 60px;font-size: 20px;">02<span style="margin-left: 10px;">交保证金</span></span>
        <span style="margin-left: 60px;">></span>
        <span style="margin-left: 60px;font-size: 20px;">03<span style="margin-left: 10px;">出价竞拍</span></span>
        <span style="margin-left: 60px;">></span>
        <span style="margin-left: 60px;font-size: 20px;">04<span style="margin-left: 10px;">竞拍成功</span></span>
        <span style="margin-left: 60px;">></span>
        <span style="margin-left: 60px;font-size: 20px;">05<span style="margin-left: 10px;">支付货款</span></span>
        <span style="margin-left: 60px;">></span>
        <span style="margin-left: 60px;font-size: 20px;">06<span style="margin-left: 10px;">到货确认</span></span>
      </div>
    </div>
    <div style="width: 100%;height: 400px;text-align: center;float: left;margin-top: 20px;">
      <el-image style="height: 400px;" :src="src"></el-image>
    </div>
    <div class="QR_code">
      <div class="QR_code_one">
        <div style="width: 40%;height: 200px;margin-left: 10%;float: left;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u561.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信服务号</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">一手消息随时掌握</span>
        </div>
        <div style="width: 40%;height: 200px;float: left;margin-left: 10%;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u564.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信小程序</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">随时随地交易</span>
        </div>
      </div>
      <div class="QR_code_two">
        <p style="margin-top: 47px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="margin-right: 50px;font-size: 14px;">增值电信业务经营许可证沪B</span>
          <span style="font-size: 14px;">全国免费服务热线：400-886-0000</span>
        </p>
        <p style="margin-top: 30px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="font-size: 14px;">增值电信业务经营许可证沪B</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      src: 'https://img2.baidu.com/it/u=1263362608,1866954010&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
    }
  }
}
</script>
<style lang="less" scoped>
  .bidding_details_two{
    margin-top: 50px;
    margin-left: 17px;
    border-left: 1px solid black;
    width: 24%;
    height: 500px;
    float: left;
  }
  .bidding_details_one{
    width: 75%;
    height: 600px;
    float: left;
  }
  .bidding_details{
    margin-top: 10px;
    width: 100%;
    height: 600px;
    background-color: #fff;
  }
  .QR_code_two{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code_one{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code{
    margin-top: 20px;
    float: left;
    width: 100%;
    height: 240px;
  }
</style>
